﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #333333;
        }

        #main {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background: #333333;
        }
    </style>
    <script>
        // 基于准备好的dom，初始化echarts实例
        //showCharts();
        // 指定图表的配置项和数据
        var myChart = null;
        window.onload = function () {
            myChart = echarts.init(document.getElementById('main'));
            showCharts();
        }

        window.onresize = function(){
            myChart.resize();    

        }

        var showCharts = function () {
            console.log(1111);        
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                backgroundColor: '#222222',
                series: [
                    {
                        name: '数据统计',
                        type: 'pie',
                        radius: ['40%', '80%'],
                        center: ['50%', '48%'],
                        startAngle: 10,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    //position: 'center',
                                    align: 'left',
                                    textStyle: {
                                        fontFamily: 'Microsoft YaHei',
                                        fontSize: '12',
                                        color: '#fff',
                                        //fontWeight: 'bold'
                                    },
                                    //formatter: "{b} : {c} 个\n{d}%"//在区域名字后显示值及其百分比 }, labelLine:{show:true}
                                },
                                labelLine: {
                                    normal: {
                                        show: true,
                                        length: 50,
                                        length2: 5,
                                        lineStyle: {
                                            color: '#fff',
                                            width: 5,
                                            type:'solid',
                                        }
                                    }
                                },
                                borderWidth: '0.5',
                                borderColor: '#cccccc',
                                borderType: 'solid',
                            }
                        },
                        data: [
                            {
                                value: 320,
                                name: 'OK',
                                selected:true,
                                itemStyle: {
                                    normal: {
                                        //color: '#09D981'
                                        color: '#54BCCE'
                                    }
                                }
                            },
                            {
                                value: 30,
                                name: 'NG',
                                itemStyle: {
                                    normal: {
                                        color: '#C44E4C'
                                    }
                                }
                            },
                            {
                                value: 12,
                                name: '异常',
                                itemStyle: {
                                    normal: {
                                        color: '#FFC71B'
                                    }
                                }
                            }
                        ]
                    }
                ],                
            });
        }



    </script>
</head>
<!--#9ABCDE-->
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main"></div>
</body>
</html>